import React, { Component } from 'react';
import './index.less';

import { connect } from '../../../../hrpub/common/store';

import Layout from '../../../../hrpub/common/components/Layout';

import Actions from '../actions/index';

import EditReportModal from '../../components/EditReportModal';
import TreeNodeModal from '../../components/TreeNodeModal';
import DesignReportModal from '../../components/DesignReportModal';
import CustomHeader from "../../components/customheader";
import WpsinitModal from "../../components/wpsinitModal/index.js";

import PreviewModal from '../../components/PreviewModal';


import { createPage } from 'nc-lightapp-front';

import { handleHash, getAppPageConfig } from '../../../../hrpub/common/utils/utils';
import SettingModal from '../../components/SettingModal';

const { Header, Left, Content } = Layout;

class HomePage extends Component {
    constructor(props) {
        super(props);
        if (props.use) {
            props.use.form('rptcard', 'folder', 'conditionCard');
            props.use.editTable('rptlist', 'conditionList');
        }
        // 示例为hrhi入职登记的appcode
        this.appConfig = getAppPageConfig();

        // 将props扩展给actions       
        this.actions = new Actions(this);

        this.getLanguage = this.getLanguage.bind(this)
        this.getTemplateData = this.getTemplateData.bind(this);
        this.getTreeData = this.getTreeData.bind(this);
        this.getTableData = this.getTableData.bind(this);
        // if (window.location.href.match('localhost:3006')) {
        //     window.location.hash = '#/ifr?page=2019'
        // }
    }

    // 获取左树数据
    getTreeData() {
        const { dispatch, syncTree } = this.props;

        dispatch({
            type: 'gloRep/getTreeData',
            payload: {
                syncTree: syncTree
            }
        })
    }

    // 获取
    getTableData() {
        const { dispatch, editTable } = this.props;

        dispatch({
            type: 'gloRep/getTableData',
            payload: {
                editTable: editTable
            }
        })
            .then((res) => {
                if (
                    !res.data
                ) {
                    this.actions.setButtonStatus('initPage');
                } else {
                    this.actions.setButtonStatus('tableWithData');
                    this.props.dispatch({
                        type: 'gloRep/update',
                        payload: {
                            pageStatus: 'tableWithData'
                        }
                    });
                    editTable.focusRowByIndex('rptlist', 0);
                }
            });
    }
    initWpsConfig(url){
        const { dispatch } = this.props;

        dispatch({
            type: 'gloRep/wpsPreStatus',
            payload: {
                checkstatus:true,
                url:url
            }
        })
            .then((res) => {
                if(res.success){
                    this.props.dispatch({
                        type: 'gloRep/update',
                        payload: {
                            originUrl:url,
                            isNeedWpsInterview: res.data.readstatus
                        }
                    });
                }
               
            });
    }
    componentDidMount() {
        this.getLanguage();
        this.getTemplateData();
    }

    // 获取模版
    getTemplateData() {
        const { createUIDom, dispatch, meta, button, gloRep } = this.props;
        const { pageStatus } = gloRep;
        console.log(window.location.origin)
        const url = window.location.origin
        createUIDom(this.appConfig, (data = {}) => {
            console.log(data);
            dispatch({
                type: 'gloRep/update',
                payload: {
                    context: data.context,
                    template: data.template
                }
            });
            data.template['rptlist'].items.map((item) => {
                // item.width = '220px';
            })
            meta.setMeta(data.template || {});
            button.setButtons(data.button || {});
            this.actions.setButtonStatus(pageStatus);

            // 因为treedata和tabledata依赖template，所以放在这里初始化
            this.getTreeData();
            this.getTableData();
            this.initWpsConfig(url);
            this.actions.getPageHeight();
        });
    }

    // 获取多语言
    getLanguage() {
        this.props.MultiInit.getMultiLang({
            moduleId: 'hi6007',
            domainName: 'hrhi',
            callback: (json, status, init) => {
                this.props.dispatch({
                    type: 'gloRep/update',
                    payload: {
                        language: json,
                        isGlobal: true
                    }
                });
            }
        });
    }

    render() {

        const {
            syncTree,
            gloRep,
            editTable
        } = this.props;

        const {
            language,
            createNewReportVisible,
            treeNodeModalVisible,
            designReportModal,
            transferDataSource,
            transferTargetData,
            transferOpts,
            transferCurrentInfoGroup,
            transferCurrentStep,
            transferSortList,
            previewVisible,
            ifHighLight,
            pageHeight,
            wpsvisible,
            preSettingVisible,
            infoSettingVisible,
            searchData,
            selectedRow
        } = gloRep;

        return (
            <Layout
                className="personnel-report-setting-global"
            >
                <Header
                    {...this.props}
                    showButtons={true}
                    showOrgRefer={false}
                    buttonOptions={{
                        area: 'head',
                        onButtonClick: this.actions.headerButtonClick
                    }}
                >
                    <CustomHeader {...this.props}/>
                </Header>
                <Left
                    style={{
                        top: '46px',
                        paddingLeft: '18px'
                    }}
                >
                    <div className="personnel-report-left-content">
                        {syncTree.createSyncTree({
                            treeId: 'reportTree',
                            needSearch: false,
                            needEdit: true,
                            checkable: false,
                            defaultExpandAll: false,
                            onSelectEve: this.actions.selectTree,
                            clickAddIconEve: this.actions.openEditTreeNodeModal('add'),
                            clickEditIconEve: this.actions.openEditTreeNodeModal('change'),
                            clickDelIconEve: this.actions.deleteTreeNode,
                            showModal: false
                        })}
                    </div>
                </Left>
                <Content className={'report-setting-content'}>
                    {editTable.createEditTable('rptlist', {
                        onRowClick: this.actions.rowClick,
                        // height: pageHeight - 90,
                        adaptionHeight: true
                    })}
                </Content>
                <EditReportModal
                    {...this.props}
                    language={language}
                    visible={createNewReportVisible}
                    onFormAfterChange={this.actions.onFormAfterChange}
                    onCancel={this.actions.toggleModal('createNewReportVisible', false)}
                    onSubmit={this.actions.submitReport}
                />
                <TreeNodeModal
                    {...this.props}
                    language={language}
                    visible={treeNodeModalVisible}
                    onClose={this.actions.toggleModal('treeNodeModalVisible', false)}
                    submitTreeNode={this.actions.submitTreeNode}
                />
                <WpsinitModal 
                    {...this.props}
                    language={language}
                    visible={wpsvisible}
                    onClose={this.actions.closeWpsModal}
                    confirm={this.actions.confirmOpenWps}
                    copySure={this.actions.copySure}
                />
                <DesignReportModal
                    {...this.props}
                    language={language}
                    visible={designReportModal}
                    onClose={this.actions.designAction.closeDesignModal}
                    leftData={transferDataSource}
                    rightData={transferTargetData}
                    onChange={this.actions.designAction.transferChange}
                    transferOpts={transferOpts}
                    onChangeInfoGroup={this.actions.designAction.onChangeInfoGroup}
                    transferCurrentInfoGroup={transferCurrentInfoGroup}
                    onCheckedTransfer={this.actions.designAction.onCheckedTransfer}
                    moveItems={this.actions.designAction.moveTransferItem}
                    transferCurrentStep={transferCurrentStep}
                    transferTurnStep={this.actions.designAction.turnStep}
                    transferSortList={transferSortList}
                    submitDesignModal={this.actions.designAction.submitDesignModal}
                    ifHighLight={ifHighLight}
                />
                <PreviewModal
                    {...this.props}
                    visible={previewVisible}
                />
                <SettingModal
                    {...this.props}
                    selectedRow={selectedRow}
                    language={language}
                    visible={preSettingVisible}
                    onClose={this.actions.toggleModal('preSettingVisible', false)}
                />
            </Layout>
        );
    }
};

export default connect(createPage({})(handleHash('2019', 'c=60070560&p=60070560p')(HomePage)));